<template>
  <section>
    <header></header>
    <div style="box-shadow: 0px 5px 10px rgba(194,194,194,.2);">
      <yd-cell-item arrow>
        <span slot="left">起点</span>
        <input slot="right" type="text" @click.stop="show1 = true" v-model="model1" readonly placeholder="请选择起点"
               style="padding-left: .66rem;">
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">终点</span>
        <input slot="right" type="text" @click.stop="show2 = true" v-model="model2" readonly placeholder="请选择终点"
               style="padding-left: .66rem;">
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">货物重量</span>
        <yd-input slot="right" v-model="input2" ref="input2" max="20" required :show-required-icon="false"
                  :show-success-icon="false" :show-error-icon="false" :regex="number" placeholder="请输入重量" style="margin-left:0.1rem;
"></yd-input>
        <span slot="right">吨</span>
      </yd-cell-item>

      <yd-cell-item arrow type="label">
        <span slot="left">车长</span>
        <select slot="right" style="margin-left: .66rem;color: #555;" v-model="chechang">
          <option value="null">不限</option>
          <option value="LONG21">21米</option>
          <option value="LONG18.5">18.5米</option>
          <option value="LONG17.5">17.5米</option>
          <option value="LONG14.5">14.5米</option>
          <option value="LONG13">13米</option>
          <option value="LONG9.6">9.6米</option>
          <option value="LONG7.7">7.7米</option>
          <option value="LONG6.8">6.8米</option>
          <option value="LONG6">6米</option>
          <option value="LONG4.2">4.2米</option>
          <option value="LONG3.8">3.8米</option>
        </select>
      </yd-cell-item>
      <yd-cell-item arrow type="label">
        <span slot="left">车型</span>
        <select slot="right" style="margin-left: .66rem;color: #555;" v-model="chexing">
          <option value="null">不限</option>
          <option value="GAOLAN">高栏</option>
          <option value="PINGBAN">平板</option>
          <option value="GAODIBAN">高低板</option>
          <option value="XIANGSHI">厢式</option>
          <option value="TUOGUA">拖挂</option>
          <option value="FEIYI">飞翼</option>
          <option value="QITA">其他</option>
        </select>
      </yd-cell-item>
    </div>

    <yd-cityselect v-model="show1" :callback="result1" :items="district" title="起点"></yd-cityselect>
    <yd-cityselect v-model="show2" :callback="result2" :items="district2" title="终点"></yd-cityselect>

    <div class="footer_pos">
      <div class="foot_left">
        <span>需付金额：</span><span style="color: red;font-weight: bold; ">￥{{price}}</span>
      </div>
      <div class="foot_right" @click="show3()">
        立即验证
      </div>
    </div>
    <payPart :show-wrap="iswrap" :need-param="param" :product-title="title" :product-price="price"
             :api-logo="apilogo"></payPart>

  </section>
</template>

<script>
  import District from 'ydui-district/dist/jd_province_city_area_id';
  import payPart from '@/components/api/pay_part';

  export default {
    name: "priceQuery",
    data() {
      return {
        show1: false,
        show2: false,
        model1: '',
        model2: '',
        district: District,
        district2: District,
        input2: '',
        number: '/^[0-9]*$/',
        price: '',
        param: {},
        iswrap: false,
        title: '运价查询',
        apilogo: '',
        startid: '',
        endid: '',
        chexing: 'null',
        chechang: 'null',
        province1: '',
        city1: '',
        area1: '',
        id1: '',
        province2: '',
        city2: '',
        area2: '',
        id2: '',
      }
    },
    methods: {
      result1(ret) {
        if (ret.itemName3 == '不限') {
          ret.itemName3 = '';
        }
        this.model1 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
        this.province1 = ret.itemName1;
        this.city1 = ret.itemName2;
        this.area1 = ret.itemName3;
        this.startid = ret.itemValue3;
        this.id1 = ret.itemValue3;
      },
      result2(ret) {
        if (ret.itemName3 == '不限') {
          ret.itemName3 = '';
        }
        this.model2 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
        this.province2 = ret.itemName1;
        this.city2 = ret.itemName2;
        this.area2 = ret.itemName3;
        this.endid = ret.itemValue3;
        this.id2 = ret.itemValue3;
      },
      show3() {
        const that = this;
        const input2 = this.$refs.input2;
        if (this.model1 == '') {
          this.$dialog.notify({
            mes: '请选择起点',
            timeout: 1500,
          });
          return;
        }
        if (this.model2 == '') {
          this.$dialog.notify({
            mes: '请选择终点',
            timeout: 1500,
          });
          return;
        }
        if (input2.valid == false) {
          this.$dialog.notify({
            mes: '请完善吨数',
            timeout: 1500,
          });
          return;
        }
        let redirectUrl = this.$route.path;
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response) => {
            if (response.data.code != 200) {
              this.$dialog.notify({
                mes: '您还未登录，将为您跳转到登录页面',
                timeout: 3000,
                callback: () => {
                  let obj = {};
                  obj.province1 = that.province1;
                  obj.city1 = that.city1;
                  obj.area1 = that.city1;
                  obj.id1 = that.id1;
                  obj.province2 = that.province2;
                  obj.city2 = that.city2;
                  obj.area2 = that.area2;
                  obj.id2 = that.id2;
                  obj.chechang = that.chechang;
                  obj.chexing = that.chexing;
                  obj.weight = that.input2;
                  obj.url = redirectUrl;
                  sessionStorage.setItem('redirectUrl', JSON.stringify(obj));
                  that.$router.push('/login');
                }
              });
            } else {
              that.param.startid = that.startid;
              that.param.endid = that.endid;
              that.param.chechang = that.chechang;
              that.param.chexing = that.chexing;
              that.param.weight = that.input2;
              that.param.pid = '13';
              that.iswrap = !that.iswrap;
            }
          }).catch(() => {
        })

      }
    },
    components: {
      payPart
    },
    created() {
      let that = this;
      let redirectUrl = JSON.parse(sessionStorage.getItem('redirectUrl'));
      if(redirectUrl != null){
        this.model1 = redirectUrl.province1+' '+redirectUrl.city1+' '+redirectUrl.area1;
        this.model2 = redirectUrl.province2+' '+redirectUrl.city2+' '+redirectUrl.area2;
        this.startid = redirectUrl.id1;
        this.endid = redirectUrl.id2;
        this.chechang = redirectUrl.chechang;
        this.chexing = redirectUrl.chexing;
        this.input2 = redirectUrl.weight;
        sessionStorage.removeItem('redirectUrl');
      }
      this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do', JSON.stringify({
        type: 'B',
      })).then((response) => {
        if (response.data.code == 200) {
          let arr = response.data.data;
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].id == '13') {
              that.price = arr[i].price;
              that.apilogo = arr[i].iconurl;
            }
          }
        } else {
          that.$dialog.notify({
            mes: '信息获取超时，请稍后重试',
            timeout: 1500,
          });
        }

      }).catch(() => {
      })
    },
    beforeRouteEnter(to, from, next) {
      if (from.path != '/loginback') {
        sessionStorage.removeItem('redirectUrl');
      }
      next();
    }
  }
</script>

<style scoped>
  header {
    width: 100%;
    height: 1.9rem;
    background-image: url("../../assets/api/logistics_bg.png");
    background-size: 100% 100%;
  }

  .footer_pos {
    width: 100%;
    height: 1rem;
    background: #F5F5F5;
    position: fixed;
    bottom: 0;
    display: flex;
  }

  .foot_left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }

  .foot_right {
    width: 2.5rem;
    height: 1rem;
    background: #E72A26;
    color: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
